<template>
  <view class="selectFamilyMember flex flex-column align-center">
    <s-header-title ref="headerTitle" isDisplayBack
                  :title="!options.is_multipleChoice ? `选择生日关联人`:`选择纪念日关联人`"
                  is-fixed background="#f5f5f5"
                  @getPageHeight="getPageHeight"></s-header-title>
    <view :style="{height:`${headerHeight}px`}"></view>
    <view class="selectFamilyMember_content mt_25">
      <view class="selectFamilyMember_content_all flex flex-column align-center">
        <!--        <view class="selectFamilyMember_content_all_search flex align-center justify-center mt_28">-->
        <!--          <image src="/static/shiqin-images/search.png" class="selectFamilyMember_content_all_search_image"></image>-->
        <!--          <text class="selectFamilyMember_content_all_search_text">搜索</text>-->
        <!--        </view>-->
        <view class="selectFamilyMember_content_all_tips mt_28">
          <text class="selectFamilyMember_content_all_tips_title">家庭成员</text>
          <view class="selectFamilyMember_content_all_tips_bottom mt_14 flex align-center">
            <text class="selectFamilyMember_content_all_tips_bottom_text">找不到家庭成员可</text>
            <text class="selectFamilyMember_content_all_tips_bottom_texts" @click.stop="addFamilyMembers">点击添加
            </text>
          </view>
        </view>
        <scroll-view :scroll-y="true" class="selectFamilyMember_content_all_scroll mt_20 mb_20"
                     v-if="options.is_multipleChoice" @scrolltolower="selectFamilyMemberScrolltolower">
          <view class="selectFamilyMember_content_all_list flex align-center justify-between"
                v-for="(item,index) in familyList" :key="index" @click="chooseMultipleFamilyMembers(item,index)">
            <view class="selectFamilyMember_content_all_list_left flex align-center">
              <image-avater :width="78" :height="78" :src="`${item.avatar}`"></image-avater>
              <view class="selectFamilyMember_content_all_list_left_name flex align-center">
                <text class="selectFamilyMember_content_all_list_left_name_text ml_12">{{
                    item.nickname || item.remark
                  }}
                </text>
                <view class="selectFamilyMember_content_all_list_left_name_label flex align-center justify-center ml_17"
                      v-if="!!item.remark && !!item.nickname">
                  <text class="selectFamilyMember_content_all_list_left_name_label_text">{{ item.remark }}</text>
                </view>
              </view>
            </view>
            <view class="selectFamilyMember_content_all_list_right" v-if="setTrue(item,index)">
            </view>
            <view class="selectFamilyMember_content_all_list_rightSelect" v-else></view>
          </view>
        </scroll-view>
        <scroll-view :scroll-y="true" class="selectFamilyMember_content_all_scroll mt_20 mb_20" v-else
                     @scrolltolower="selectFamilyMemberScrolltolower">
          <view class="selectFamilyMember_content_all_list flex align-center justify-between"
                v-for="(item,index) in familyList" :key="index" @click="familyIndex = index">
            <view class="selectFamilyMember_content_all_list_left flex align-center">
              <image-avater :width="78" :height="78" :src="`${item.avatar}`"></image-avater>
              <view class="selectFamilyMember_content_all_list_left_name flex align-center">
                <text class="selectFamilyMember_content_all_list_left_name_text ml_12">{{
                    item.nickname || item.remark
                  }}
                </text>
                <view class="selectFamilyMember_content_all_list_left_name_label flex align-center justify-center ml_17"
                      v-if="!!item.remark && !!item.nickname">
                  <text class="selectFamilyMember_content_all_list_left_name_label_text">{{ item.remark }}</text>
                </view>
              </view>
            </view>
            <view class="selectFamilyMember_content_all_list_right" v-if="familyIndex == index">
            </view>
            <view class="selectFamilyMember_content_all_list_rightSelect" v-else></view>
          </view>
        </scroll-view>
      </view>
    </view>
    <view class="selectFamilyMember_bottomBtn flex align-center justify-center mt_101" @click.stop="back">
      <text class="selectFamilyMember_bottomBtn_text">确定</text>
    </view>

    <!-- 家庭成员弹窗 -->
    <first_popup ref="familyMemberPopUp">
      <template #content>
        <view class="familyMemberPopUp flex flex-column align-center">
          <view class="familyMemberPopUp_title mt_45">
            <view class="familyMemberPopUp_title_name">
              添加家庭成员
            </view>
          </view>
          <image class="familyMemberPopUp_icon z_1" :src="`${IMG_URL}/index/add_icon.png`"></image>
          <scroll-view :scroll-left="familyMembersProfileListScroll.scrollLeft" :scroll-x="true"
                       class="familyMemberPopUp_scrollView mt_32"
                       scroll-with-animation>
            <view :id="selectProfileIndex == index ? 'familyMemberPopUp_scrollView_list':''"
                  class="familyMemberPopUp_scrollView_list" v-for="(item,index) in familyMembersProfileList" :style="{
              padding:index == 0 ? '0 12rpx 0 0':index == familyMembersProfileList.length?'0 0 0 12rpx':'0 12rpx'
            }" :key="index" @click="changeTab(index)">
              <image-avater id="imageAvater" :width="selectProfileIndex == index?111 : 78"
                            :height="selectProfileIndex == index? 111 : 78" :src="`${nc_image}${item.avatar}`"
                            :is-order="selectProfileIndex == index"
                            :border-width="4" border-color="#FF4206"></image-avater>
            </view>
          </scroll-view>
          <view class="familyMemberPopUp_editInfo flex align-center justify-between mt_64">
            <view class="familyMemberPopUp_editInfo_left flex align-center justify-center">
              <input type="text" :value="familyPopupFrom.nameBox" placeholder="尊姓"
                     placeholder-class="familyMemberPopUp_editInfo_placeholder" @input="suernameInput"
                     @blur="surnameBlur">
            </view>
            <view class="familyMemberPopUp_editInfo_right flex align-center justify-center">
              <input type="text" :value="familyPopupFrom.appellation" placeholder="大名"
                     placeholder-class="familyMemberPopUp_editInfo_placeholder" @input="nameInput" @blur="nameBlur">
            </view>
          </view>
        </view>
      </template>
    </first_popup>
  </view>
</template>

<script>
  import HeaderTitle from '@/pages/family/components/headerTitle.vue';
  import First_popup from '@/pages/family/components/first_popup.vue';
  import sheep from '@/sheep';
  import ImageAvater from '@/sheep/components/s-avatar/s-avatar.vue';

  export default {
    components: { ImageAvater, First_popup, HeaderTitle },
    data() {
      return {
        // 头部高度
        headerHeight: 0,
        familyList: [],
        familyIndex: 0,
        // 家庭成员头像列表
        familyMembersProfileList: [],
        // 选中的家庭成员头像的下标
        selectProfileIndex: 2,
        familyPopupFrom: {
          nameBox: '',
          appellation: '',
        },
        familyMembersProfileListScroll: {
          scrollLeft: 0,
          allWidth: 0,
          width: 0,
          selectWidth: 0,
        },
        // 获取家庭成员参数
        getFamilyMemberListParams: {
          page: 1,
          pagesize: 20,
          family_id: '',
          type: 2,
          total: 0,
        },
        selectMember: [],
      };
    },
    props: {
      options: {
        type: Object,
        default: () => {
          return {
            is_multipleChoice: 1,
          };
        },
      },
    },
    computed: {
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
      nc_image() {
        return sheep.$store('AI').nc_image;
      },
    },
    watch: {
      familyMembersProfileListScroll: {
        deep: true,
        handler(newValue, oldValue) {
          this.familyMembersProfileListScroll.scrollLeft = newValue.allWidth - newValue.width / 2 + newValue.selectWidth / 2;
        },
      },
    },
    methods: {
      setTrue(info, index) {
        let selectProfileIndex = -1;
        this.selectMember.forEach((item) => {
          if (item.id == info.id) {
            selectProfileIndex = index;
          }
        });
        return selectProfileIndex == index;
      },
      chooseMultipleFamilyMembers(info, index) {
        let selectProfileIndex = -1;
        this.selectMember.forEach((item, indexs) => {
          if (item.id == info.id) {
            selectProfileIndex = indexs;
          }
        });
        if (selectProfileIndex != -1) {
          this.selectMember.splice(selectProfileIndex, 1);
        } else {
          this.selectMember.push({
            id: info.id,
            name: info.nickname || info.remark,
            index,
          });
        }
      },
      suernameInput(e) {
        if (e.target.value.length > 1) {
          let arr;
          arr = e.target.value.match(/[\u4e00-\u9fa5]/g);
          if (!!arr) {
            this.$set(this.familyPopupFrom, 'nameBox', arr.join('').substring(0, 2));
          } else {
            this.$set(this.familyPopupFrom, 'nameBox', '');
          }
        }
      },
      surnameBlur(e) {
        if (e.target.value.length > 0) {
          let arr;
          arr = e.target.value.match(/[\u4e00-\u9fa5]/g);
          if (!!arr) {
            this.$set(this.familyPopupFrom, 'nameBox', arr.join('').substring(0, 2));
          } else {
            this.$set(this.familyPopupFrom, 'nameBox', '');
          }
        }
      },
      nameInput(e) {
        if (e.target.value.length > 1) {
          let arr;
          arr = e.target.value.match(/[\u4e00-\u9fa5]/g);
          if (!!arr) {
            this.$set(this.familyPopupFrom, 'appellation', arr.join('').substring(0, 4));
          } else {
            this.$set(this.familyPopupFrom, 'appellation', '');
          }
        }
      },
      nameBlur(e) {
        if (e.target.value.length > 0) {
          let arr;
          arr = e.target.value.match(/[\u4e00-\u9fa5]/g);
          if (!!arr) {
            this.$set(this.familyPopupFrom, 'appellation', arr.join('').substring(0, 4));
          } else {
            this.$set(this.familyPopupFrom, 'appellation', '');
          }
        }
      },
      getPageHeight(number) {
        this.headerHeight = number;
      },
      back() {
        if (this.options.is_multipleChoice) {
          uni.$emit('selectMember', this.selectMember);
        } else {
          uni.$emit('selectMember', this.familyList[this.familyIndex]);
        }
        uni.navigateBack();
      },
      // 添加家庭成员
      async addFamilyMembers() {
        let { data } = await sheep.$api.family.getDefaultAvatar({ type: 0 });
        this.familyMembersProfileList = data;
        this.$refs.familyMemberPopUp.openPopup({
          title: '添加家庭成员',
          showTitle: false,
          maskClick: false,
          popupBackground: true,
          confirm: async () => {
            if (this.familyPopupFrom.nameBox == '') {
              uni.showToast({
                title: '姓氏尚未填写',
                icon: 'none',
              });
              return;
            }
            if (this.familyPopupFrom.appellation == '') {
              uni.showToast({
                title: '名称尚未填写',
                icon: 'none',
              });
              return;
            }
            const { code } = await sheep.$api.family.addFamilyMember({
              family_id: this.options.family_id,
              surname: this.familyPopupFrom.nameBox,
              daimyo: this.familyPopupFrom.appellation,
              avatar: this.familyMembersProfileList[this.selectProfileIndex].avatar,
              gender: this.familyMembersProfileList[this.selectProfileIndex].sex,
            });
            if (code == 1) {
              uni.showToast({
                title: '添加成功',
                icon: 'none',
              });
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none',
              });
            }
            this.$refs.familyMemberPopUp.closePopup();
            this.familyPopupFrom.appellation = '';
            this.familyPopupFrom.nameBox = '';
            this.familyList = [];
            this.getFamilyMemberListParams.page = 1;
            await this.getFamilyMembers();
          },
        });
      },
      changeTab(index) {
        this.selectProfileIndex = index;
        setTimeout(() => {
          this.moveTo(index);
        }, 10);
      },
      moveTo(index) {
        const query = uni.createSelectorQuery().in(this);
        query.select('.familyMemberPopUp_scrollView').boundingClientRect(data => {
          this.familyMembersProfileListScroll.width = data.width;
        }).exec();
        query.select('#familyMemberPopUp_scrollView_list').boundingClientRect(rect => {
          this.familyMembersProfileListScroll.selectWidth = rect.width;
        }).exec();
        query.selectAll('.familyMemberPopUp_scrollView_list').boundingClientRect(rect => {
          if (rect.length > 0) {
            this.familyMembersProfileListScroll.allWidth = 0;
            rect.forEach((item, i) => {
              if (i < index) {
                this.familyMembersProfileListScroll.allWidth += Number(item.width);
              }
            });
          }
        }).exec();
      },
      // 获取成员列表
      async getFamilyMembers() {
        this.getFamilyMemberListParams.family_id = this.options.family_id;
        let { data } = await sheep.$api.family.getFamilyMemberList(this.getFamilyMemberListParams);
        data.forEach((item, index) => {
          if (item.id == this.options.id) {
            this.selectMember.push({
              id: item.id,
              name: item.nickname || item.remark,
              index,
            });
          }
          this.familyList.push(item);
        });
        this.getFamilyMemberListParams.total = data.count;
      },
      selectFamilyMemberScrolltolower() {
        if (this.getFamilyMemberListParams.page * this.getFamilyMemberListParams.pagesize <= this.getFamilyMemberListParams.total) {
          this.getFamilyMemberListParams.page++;
          this.getFamilyMembers();
        }
      },
    },
  };
</script>

<style lang="scss">
  .selectFamilyMember {
    width: 750rpx;
    min-height: 100vh;
    background: #F5F5F5;
    overflow: hidden;

    .selectFamilyMember_content {
      width: 702rpx;
      background: #FFFFFF;
      border-radius: 15rpx 15rpx 15rpx 15rpx;
      overflow: hidden;

      .selectFamilyMember_content_all {
        width: 662rpx;
        margin: 0 20rpx;

        .selectFamilyMember_content_all_search {
          width: 662rpx;
          height: 80rpx;
          background: #E5E5E5;
          border-radius: 50rpx 50rpx 50rpx 50rpx;

          .selectFamilyMember_content_all_search_image {
            width: 25rpx;
            height: 25rpx;
          }

          .selectFamilyMember_content_all_search_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 26rpx;
            color: #4B4B4B;
          }
        }

        .selectFamilyMember_content_all_tips {
          width: 662rpx;

          .selectFamilyMember_content_all_tips_title {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 30rpx;
            color: #292929;
          }

          .selectFamilyMember_content_all_tips_bottom {
            .selectFamilyMember_content_all_tips_bottom_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 24rpx;
              color: #4B4B4B;
            }

            .selectFamilyMember_content_all_tips_bottom_texts {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 24rpx;
              color: #64A3F8;
            }
          }
        }

        .selectFamilyMember_content_all_scroll {
          width: 662rpx;
          max-height: 920rpx;

          .selectFamilyMember_content_all_list {
            margin: 20rpx 0;
            width: 662rpx;

            .selectFamilyMember_content_all_list_left {
              .selectFamilyMember_content_all_list_left_name {
                .selectFamilyMember_content_all_list_left_name_text {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  font-size: 30rpx;
                  color: #4B4B4B;
                }

                .selectFamilyMember_content_all_list_left_name_label {
                  width: 66rpx;
                  height: 30rpx;
                  background: #FF7950;
                  border-radius: 15rpx 15rpx 15rpx 15rpx;

                  .selectFamilyMember_content_all_list_left_name_label_text {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 500;
                    font-size: 16rpx;
                    color: #FFFFFF;
                  }
                }
              }
            }

            .selectFamilyMember_content_all_list_right {
              width: 26rpx;
              height: 26rpx;
              border-radius: 50%;
              border: 6rpx solid #FF4206;
            }

            .selectFamilyMember_content_all_list_rightSelect {
              width: 26rpx;
              height: 26rpx;
              border-radius: 50%;
              border: 2rpx solid #707070;
            }
          }
        }
      }
    }

    .selectFamilyMember_bottomBtn {
      width: 362rpx;
      height: 80rpx;
      background: #FF4206;
      border-radius: 50rpx 50rpx 50rpx 50rpx;

      .selectFamilyMember_bottomBtn_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #FFFFFF;
      }
    }


    .familyMemberPopUp {
      width: 506rpx;


      .familyMemberPopUp_title {
        width: 454rpx;

        .familyMemberPopUp_title_name {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 48rpx;
          color: #292929;

        }

        .familyMemberPopUp_title_detail {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #9F9F9F;
        }
      }

      .familyMemberPopUp_icon {
        width: 147rpx;
        height: 147rpx;
        position: absolute;
        top: 0;
        right: 0;
      }

      .familyMemberPopUp_scrollView {
        width: 506rpx;
        overflow: hidden;
        white-space: nowrap;

        .familyMemberPopUp_scrollView_list {
          display: inline-block;
        }
      }

      .familyMemberPopUp_editInfo {
        width: 506rpx;

        .familyMemberPopUp_editInfo_left {
          width: 239rpx;
          height: 80rpx;
          background: #FFFFFF;
          border-radius: 40rpx 40rpx 40rpx 40rpx;
          border: 2rpx solid #707070;

          input {
            text-align: center;
          }
        }

        .familyMemberPopUp_editInfo_right {
          width: 239rpx;
          height: 80rpx;
          background: #FFFFFF;
          border-radius: 40rpx 40rpx 40rpx 40rpx;
          border: 2rpx solid #707070;

          input {
            text-align: center;
          }
        }

        .familyMemberPopUp_editInfo_placeholder {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #A0A0A0;
        }
      }
    }
  }
</style>
